<!-- 基础设置->往来单位 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="accont-set-wrapper wh100">
            <!-- 搜索条件 -->
            <a-row type="flex" class="search-wrapper margin-top-10">
                <a-col :span="18" :order="1">
                    <a-form :layout="'inline'" :from="from">
                        <a-form-item label="单位类型">
                            <a-select placeholder="请选择类型" style="width: 140px" @change="handleCheckedType">
                                <a-select-option v-for="(key, index) in partnerType" :key="index" :value="key.type">
                                    {{ key.title }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="单位名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
                            <a-input v-model="crmName" placeholder="请输入单位名称" />
                        </a-form-item>
                        <a-form-item label="所属地区" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
                            <a-cascader placeholder="请选择行政区" @change="onAreaChange" :field-names="{label: 'areaName',value: 'areaCode',children: 'children'}" :options="regions" />
                        </a-form-item>
                    </a-form>
                </a-col>
                <a-col :span="6" :order="2">
                    <nly-button variant="info" @click="getData" button-class="mr-2 btn-search" :disabled="loading">查询</nly-button>
                </a-col>
            </a-row>
            <a-col :span="24">
                <a-divider class="divider" />
            </a-col>
            <!-- 按钮 -->
            <div class="btn-wrapper">
                <a-button type="primary" @click="addshowModal">
                    新建
                </a-button>
                <!-- <i class="fa fa-fw fa-cog fieldSet "></i> -->
            </div>

            <!-- 表格数据 -->
            <div class="table-wrapper">
                <a-table :columns="columns" :data-source="postData" :scroll="{ x: 1000, y: 300 }" :pagination="pagination" @change="onTableChange" :loading="loading" :size="small" bordered>
                    <span slot="type" slot-scope="text">
                        {{text==1?'客户':text==2?'供应商':'客户/供应商'}}
                    </span>
                    <!-- 操作 -->
                    <template slot="operate" slot-scope="text, record, index">
                        <div class="row justify-content-md-center">
                            <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
                                <a href="javascript:;" title="删除" class="mr-1 col-1" @click="Delete(record,index)"><i class="fa fa-trash-alt" style="color: #dd5a43;"></i></a>
                                <a href="javascript:;" title="修改" class="mr-1 col-1" @click="Edit(record,index)"><i class="fa fa-edit" style="color: #40a9ff;"></i></a>
                            </span>
                        </div>
                    </template>
                </a-table>
            </div>
            <!-- 弹出框 -->
            <client-modal ref="addModalHock" @ok="getData" :data="postData"></client-modal>

        </div>
    </div>
</template>
<script>
const columns = [
    // {
    //     title: "首拼码",
    //     dataIndex: "crmSimpleName",
    //     key: "crmSimpleName",
    // },
    {
        title: "单位名称",
        dataIndex: "crmName",
        key: "crmName",
    },
    {
        title: "统一代码",
        dataIndex: "companyNumber",
        key: "companyNumber",
    },
    
    {
        title: "类型",
        key: "partnerType",
        dataIndex: "partnerType",
        scopedSlots: { customRender: "type" },
    },
    {
        title: "所属地区",
        key: "areaName",
        dataIndex: "areaName",
    },
    {
        title: "联系地址",
        key: "contactAddress",
        dataIndex: "contactAddress",
    },
    {
        title: "联系人姓名",
        key: "contactMan",
        dataIndex: "contactMan",
    },
    {
        title: "操作",
        key: "operation",
        dataIndex: "operation",
        scopedSlots: { customRender: "operate" },
    },
];

import { list, save, remove } from "@/api/erp/partner";
import clientModal from "./modal/clientModal";
//区域选择
import { treeList } from "@/api/area";
import { areaPageListToTreeForId } from "@/utils/tree";

export default {
    data() {
        // this.cacheData = data.map((item) => ({ ...item }));
        return {
            crmName: "", //单位名称
            areaName: "", //所属地区
            checkedType: "", //选择的单位类型
            partnerType: [
                //类型-1:客户，2:供应商，3:客户/供应商
                {
                    type: 1,
                    title: "客户",
                },
                {
                    type: 2,
                    title: "供应商",
                },
                {
                    type: 3,
                    title: "客户/供应商",
                },
            ],
            postData: [],
            loading: false,
            editingKey: "",
            columns: columns,
            form: "",
            formLayout: "inline",
            pagination: {
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: (total) => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input
                                style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                size="small"
                                onPressEnter={(e) => this.changePageSize(e)}
                            />
              条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            //弹窗框
            visible: "hello",
            //行政区信息
            regions: [],
        };
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: "a" });
    },
    created() {
        this.getData();
        this.areaTree();
    },
    computed: {
        formItemLayout() {
            const { formLayout } = this;
            return formLayout === "inline"
                ? {
                    labelCol: { span: 10 },
                    wrapperCol: { span: 14 },
                }
                : {};
        },
    },
    methods: {
        //加载 区域数据
        areaTree() {
            treeList()
                .then((response) => {
                    if (response.code === 200) {
                        const { data } = response;
                        const childrenNav = [];
                        const province = data.filter((f) => f.parentCode == 0);
                        this.taxAreaList = province;
                        areaPageListToTreeForId(data, childrenNav, 0);
                        console.log("加载 区域数据:", childrenNav);
                        this.regions = childrenNav;
                    }
                })
                .catch((error) => { });
        },
        //地区选择事件
        onAreaChange(value, selectedOptions) {
            this.areaText = selectedOptions.map((o) => o.areaCode)[
                selectedOptions.length - 1
            ];

            this.areaName = selectedOptions.map((o) => o.areaName).join("/");
            console.log(this.areaText, this.areaName);
        },
        handleCheckedType(value) {
            this.checkedType = value;
        },
        /**
         * 分页
         * size: 每页好多条, current: 当前页 ,total:总条数
         */
        //改变分页大小
        changePageSize(e) {
            console.log(e);
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 20;
            }
            if (size > 500) {
                size = 500;
            }
            const { pagination } = this;

            console.log(e, value);
            // Object.assign(this.postData.page, {
            //     current:1,
            //     size
            // });
            Object.assign(this.pagination, {
                current: 1,
                pageSize: size,
            });
            console.log("改变分页大小_pagelist");
            this.getData();
        },
        getData() {
            //获取列表数据
            let params = {
                partnerType: this.checkedType,
                crmName: this.crmName, //单位名称
                areaName: this.areaName, //所属地区
                current: this.pagination.current,
                size: this.pagination.pageSize,
            };
            console.log(params);
            list(params).then((res) => {
                if (res.code == 200) {
                    this.postData = res.data.records;
                    Object.assign(this.pagination, {
                        total: res.data.total,
                    });
                    console.log(this.pagination);
                } else {
                    // this.$message.warning(res.message);
                }
            });
        },
        addshowModal() {
            //新增
            this.$refs.addModalHock.handleAdd();
        },
        Delete(row, index) {
            //删除
            let _this = this;
            this.$confirm({
                title: "确认",
                content: (
                    <span>您确定要{<span style="color:red;">删除</span>}该记录吗？</span>
                ),
                onOk() {
                    remove({ id: row.id }).then((response) => {
                        if (response.code === 200) {
                            _this.$message.success("删除成功");
                            _this.getData(); //刷新数据
                        } else {
                            _this.$message.error(response.message);
                        }
                    });
                },
                onCancel() { },
            });
        },
        Edit(row, index) {
            //修改
            this.$refs.addModalHock.handleEdit(row, index);
        },
    },
    components: {
        clientModal,
    },
};
</script>
<style lang="less">
.accont-set-wrapper {
    display: flex;
    flex-direction: column;
    .btn-wrapper > button {
        margin-right: 10px;
    }
    .btn-wrapper > button:first-child {
        margin-bottom: 10px;
    }
    .divider {
        margin: 0.5rem 0;
        height: 0.1px;
    }
    .table-wrapper {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        height: calc(100% - 60px);
        margin:10px;
    }

    .search-wrapper {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .ant-form .ant-form-item {
            margin-bottom: 0;
        }
        .ant-input {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
        }
        label {
            margin-bottom: 0px;
        }
        .btn-search {
            margin-top: 4px;
        }
    }

    /** important */
    .ant-table-body {
        overflow: scroll;
        height: 0;
        max-height: none !important;
    }
}
</style>